<template>
  <div class="jiansuo_bg">
    <div class="cpjs">
      <div class="show" v-if="currentPageData">
        <div
          style="cursor:pointer"
          class="show_k"
          v-for="(item, index) of currentPageData"
          :key="index"
          @click="more(item.id, index)"
        >
          <div style="display:flex;flex-direction:column;justify-content:center">
            <img :src="item.thumb" class="gq-img" />
            <div
              :title="item.title"
              class="content"
            >{{ item.title.length>10?item.title.substr(0, 10) + "..." :item.title}}</div>
          </div>
        </div>
      </div>

      <div id="page">
        <el-pagination
          v-if="this.totalRow"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :pager-count="5"
          :page-size="pageSize"
          layout="  prev, pager, next"
          :total="totalRow"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nav: [
        { name: "瓷器" },
        { name: "玉器" },
        { name: "书画" },
        { name: "古籍" },
        { name: "杂项" },
        { name: "其他" },
      ],
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 12, // 每页显示数量

      totalRow: 0, // 统共页数，默认为1

      currentPageData: [{ list: "" }],
      idx: 1,
    };
  },
  created() {
    this.i();
  },
  mounted() {
    this.setCurrentPageData();
  },
  props: ["id"],
  methods: {
    i() {
      this.$emit("checked", this.$router.history.current.query.orderId);
    },
    setCurrentPageData() {
      this.$api
        .get(
          `${this.book}man/antique?pageNumber=${this.currentPage}&pageSize=${this.pageSize}&fengpinfeilei=${this.$router.history.current.query.sort}`
        )
        .then((res) => {
          if (!res.data.paginate) return; //如果非空  继续以下代码

          this.totalRow = res.data.paginate.totalRow;
          this.currentPageData = res.data.paginate.list;
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }

      this.setCurrentPageData(
        `${this.book}man/antique?pageNumber=${this.currentPage}&pageSize=${this.pageSize}&fengpinfeilei=${this.$router.history.current.query.sort}`
      );
    },
    more(id, index) {
      this.$router
        .push({
          path: `/cangpinjiansuo/cangpinjiansuodetail?id=${id}`,
          query: {
            orderId: this.$router.history.current.query.orderId,
          },
        })
        .catch((err) => {
          err;
        });
    },
  },

  watch: {
    $route(to, from) {
      this.$emit("checked", this.$router.history.current.query.orderId);
      if (to.query.symbol != from.query.symbol) {
        this.currentPage = 1;
        this.setCurrentPageData();
        return;
      }
    },
  },
};
</script>
<style scoped>
.jiansuo_bg {
  background: url("../../assets/image/book/jiansuo_bg.png") no-repeat;
  height: 100%;
}
.gq-img {
  width: 250px;
  height: 200px;
  object-fit: contain;
  object-position: top;
}
ul,
a {
  text-decoration: none;
  color: #6e6e6e;
}
li,
p {
  margin: 0px;
  padding: 0px;
}

.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
.daohang {
  display: flex;
  height: 60px;

  max-width: 1200px;
  margin: auto;
}
.daohang li {
  width: 270px;
  font-size: 24px;
}
li {
  list-style: none;
}

.cpjs {
  max-width: 1300px;
  margin: auto;
  padding-top: 20px;
}
.bg_pic {
  width: 100%;
}

.show {
  max-width: 1180px;
  display: flex;
  margin: auto;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 42px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.show_k {
  margin-top: 26px;
  position: relative;
} /* 如果最后一行是3个元素 */
.show_k:last-child:nth-child(4n - 1) {
  margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.show_k:last-child:nth-child(4n - 2) {
  margin-right: calc(48% + 8% / 3);
}
.content {
  text-align: center;
  margin-top: 15px;
}
/* fenye */
.page-bar {
  margin: 40px auto;
  margin-top: 60px;
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
